<template>
    <div class="box" v-for="item, idnex in restaurantCardList">
        <div class="merchantmsg">
            商家信息
        </div>
        <div class="ulList">
            <ul>
                <li class="li1">
                    <span class="sp1">营业时间</span><br>
                    <span class="sp2">{{ item.Hours }}</span>
                </li>
                <li class="li2" v-if="Branch">
                    <span class="sp3">{{ item.Branch }}</span><span class="iconfont icon-xiangyou"></span>
                </li>
                <li class="li2" v-else>
                    <span class="sp3">暂无数据</span><span class="iconfont icon-xiangyou"></span>
                </li>
                <li class="li3">
                    <span class="sp4">{{ item.certificates }}</span><span class="iconfont icon-xiangyou"></span>
                </li>
            </ul>
        </div>


    </div>
</template>

<script setup>
import { getRestaurantCard } from '@/api/api.js'
import { ref, onMounted } from 'vue'

const restaurantCardList = ref([])
const Branch = ref(null)
onMounted(async () => {
    // 从本地取出id
    let uid = localStorage.getItem('uId')
    let { data, status } = await getRestaurantCard({ id: uid })
    if (status == 200) {
        restaurantCardList.value = data
        Branch.value = data[0].Branch
    }
    
})
</script>

<style lang="scss" scoped>
.box {
    .merchantmsg {
        color: rgba(56, 56, 56, 1);
        font-size: 28px;
        line-height: 45px;
        font-weight: bold;
        padding: 38px 0 0 32px;
    }

    .ulList {
        ul {
            color: rgba(56, 56, 56, 1);

            .iconfont {
                font-size: 24px;
            }

            .li1 {
                border-top: 1px solid rgb(243, 243, 243);
                border-bottom: 1px solid rgb(243, 243, 243);
                font-size: 28px;

                .sp1 {
                    display: inline-block;
                    height: 43px;
                    padding: 18px 0 6px 32px;
                }

                .sp2 {
                    display: inline-block;
                    font-size: 22px;
                    padding: 0 0 21px 32px;
                }
            }

            .li2 {
                border-bottom: 1px solid rgb(243, 243, 243);
                height: 72px;
                font-size: 28px;
                display: flex;
                justify-content: space-between;
                padding-right: 32px;
                align-items: center;
                padding-left: 30px;
            }

            .li3 {
                border-bottom: 1px solid rgb(243, 243, 243);
                font-size: 28px;
                height: 72px;
                display: flex;
                justify-content: space-between;
                padding-right: 32px;
                align-items: center;
                padding-left: 30px;

            }
        }
    }
}
</style>